<template>
    <div id="city-box">
        <div class="slider-city">
            <ul class="cur">
                <!-- 北京 -->
                <li>
                    <a href="javascript:;">
                        <img src="https://static.zhipin.com/zhipin-geek/v571/web/geek/images/city_101010100.png"
                            alt="北京">
                    </a>
                </li>
                <!-- 上海 -->
                <li>
                    <a href="javascript:;">
                        <img src="https://static.zhipin.com/zhipin-geek/v571/web/geek/images/city_101020100.png"
                            alt="上海">
                    </a>
                </li>
                <!-- 深圳 -->
                <li>
                    <a href="javascript:;">
                        <img src="https://static.zhipin.com/zhipin-geek/v571/web/geek/images/city_101280600.png"
                            alt="深圳">
                    </a>
                </li>
                <!-- 杭州 -->
                <li>
                    <a href="javascript:;">
                        <img src="	https://static.zhipin.com/zhipin-geek/v571/web/geek/images/city_101210100.png"
                            alt="杭州">
                    </a>
                </li>
                <!-- 广州 -->
                <li>
                    <a href="javascript:;">
                        <img src="https://static.zhipin.com/zhipin-geek/v571/web/geek/images/city_101280100.png"
                            alt="广州">
                    </a>
                </li>
                <!-- 成都 -->
                <li>
                    <a href="javascript:;">
                        <img src="https://static.zhipin.com/zhipin-geek/v571/web/geek/images/city_101270100.png"
                            alt="成都">
                    </a>
                </li>
            </ul>
        </div>
    </div>
</template>

<script lang="ts">
export default {
name: "CityImage",
};
</script>

<style lang="less" scoped>
#city-box {
    width: 1184px;
    margin: 0 auto;

    ul {
        display: flex;
        justify-content: space-between;

        li {
            width: 194px;
            height: 80px;

            a {
                img {
                    width: 100%;

                    &:hover {
                        filter: brightness(70%);
                    }
                }
            }
        }
    }
}
</style>